<%@ page language="java" contentType="text/html; utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      #sexyline { 
          margin: 25px 0;
          height: 1px;
          background: #eeeee;
          background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, grey));
      }​
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    
    <!--Custom JS scripts-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">drop.in</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit" style="padding: 10px 10px 10px 10px;">
        <div style="text-align: center;">
        <h2>Search Users</h2>
        </div>
      </div>
      <div class="row">
        <div class="span12">
        <ul class="nav nav-tabs">
          <li class="active">
            <a href="#">Search Users</a>
          </li>
          <li><a href="#">Search Events</a></li>
          <li><a href="#">Search Results</a></li>
        </ul>
		<form id="usersearch" action="SearchUserServlet?search=user">
		<fieldset>
		  <legend> Insert search options: </legend><br />
		 	<label class="control-label" for="email">Email Address:</label>
		 	<div class="controls">
		 	  <input type="email" class="input-xlarge" id="searchedemail" name="searchedemail" size="32" placeholder="Enter a valid email address">
		 	  <p class="help-block"> </p>
		 	</div>
		 	<label class="control-label" for="name">Full Name:</label>
		 	<div class="controls">
		 	  <input type="text" class="input-xlarge" id="searchedname" name="searchedname" pattern="[A-z ]*" size="32" placeholder="Name">
		 	  <p class="help-block"> </p>
		 	</div>
		 	<label class="control-label" for="name">Country:</label>
		 	<div class="controls">
		 	  <input type="text" class="input-xlarge" id="searchedcountry" name="searchedcountry" pattern="[A-z ]*" size="32" placeholder="Country">
		 	  <p class="help-block"> </p>
		 	</div>
		 	<label class="control-label" for="name">City:</label>
		 	<div class="controls">
		 	  <input type="text" class="input-xlarge" id="searchedcity" name="searchedcity" pattern="[A-z ]*" size="32" placeholder="City">
		 	  <p class="help-block"> </p>
		 	</div>
		 	<div class="controls" >
		 	  <input type="hidden" class="input-xlarge" id="search" name="search" value="user">
		 	</div>
		 	<div class="form-actions">
              <button type="submit" class="btn btn-primary">Search!</button>
			</div>
		   </fieldset>
		  </form>
		  </div> 
		</div> 
		</div>
      <footer>
        <p style="text-align: center; margin-top: 50px; color: grey;">&copy; PiP 2012</p>
      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>

  </body>
</html>
